<template>
  <div class="wh100 relative">
    <sell-header></sell-header>
    <div class="tab border-1px-bottom">
      <div class="tab-item">
        <router-link :to="{ name: 'goods'}">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link :to="{ name: 'ratings'}">评价</router-link>
      </div>
      <div class="tab-item">
        <router-link :to="{ name: 'seller'}">商家</router-link>
      </div>
    </div>
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
import qs from 'query-string';
import { mapActions } from 'vuex';
import SellHeader from 'components/SellHeader/SellHeader';
export default {
  'name': 'home',
  data() {
    return {};
  },
  'components': { SellHeader },
  created() {
    const sellerID = qs.parse(window.location.search).id || 1001;
    this.getSellerAsyn({ sellerID });
  },
  mounted() {
    // DOM渲染完成，组件挂载完成
  },
  'computed': {},
  'methods': {
    ...mapActions(['getSellerAsyn'])
  },
  'watch': {}
};
</script>

<style lang='stylus' rel='stylesheet/stylus'>
@import '../common/stylus/mixin'
.tab
  display flex
  width 100%
  height 40px
  line-height 40px
  .tab-item
    flex 1
    text-align center
    & > a
      display block
      width 100%
      font-size 16px
      color rgb(77, 85, 93)
      font-weight 500
      border-1px-bottom(rgba(7, 17, 27, 0.1))
      &.active
        color rgb(240, 20, 20)
        border-1px-bottom(rgb(240, 20, 20))
</style>
